<script setup>
import { ElMessage, ElMessageBox } from 'element-plus'
//删除确认框 start
const open = (data) => {
  ElMessageBox.confirm(
    '你确定要删除吗',
    {
      confirmButtonText: '确定',
      cancelButtonText: '我后悔了',
      type: 'warning',
    }
  )
    .then( async () => {
      console.log(data);
        let result = await api.del("/api/brand/del/" , data);
        let list = await api.get("/api/brand/get");
        if(result.code == 200){
          tableData.value = list.data.list;
          ElMessage({
        type: 'success',
        message: '删除成功',
      })
    }else{
      ElMessage({
        type: 'info',
        message: ' 删除失败',
      })
    }
        })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '正确的决定！！！',
      })
    })
}

//删除确认框  end
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'
import { onMounted,ref ,reactive} from 'vue';
import api from '../api'
import { fa } from 'element-plus/es/locales.mjs';
const tableData = ref([]);

//加载数据
onMounted( async function(){
    checkData();
})
//加载数据
//添加新车弹出
var dialogFormVisible = ref(false);
const formLabelWidth = '140px'
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})
//添加新车弹出
//新建变量存储要修改的数据
const editObj = ref({});
//编辑车辆信息弹出
var dialogFormEdiit = ref(false);
//编辑车辆信息弹出
const openEdit =  (row)=>{
  //将数据存储到editObj上面
  editObj.value.name = row.name;
  editObj.value.id = row.id;
//关闭窗口
  dialogFormEdiit.value = true;
}
  //保存修改后的数据
  const saveEdit = async ()=>{
    let result = await api.edit("api/brand/edit" , editObj.value);
    if(result.code == 200){
          checkData();
          ElMessage({
        type: 'success',
        message: '普天同庆 添加成功！',
      })
    }else{
      ElMessage({
        type: 'info',
        message: '不好意思 更新失败~',
      })
    }
    dialogFormEdiit.value = false;
  }

//新建一个变量用于存储新增加的车辆的信息
const addObj = ref({
    plateNumber:'',
    vehicleid:'',
    brand:'',
    model:'',
    color:'',
    year:'',
    capacity:'',
    status:'',
    rentPrice:''
})
//保存新添加的车辆信息
const addSave = async ()=>{
  let result = await api.add("/api/brand/add",addObj.value);
  if(result.code == 200){
          checkData();
          ElMessage({
        type: 'success',
        message: '666 又来了个新车',
      })
    }else{
      ElMessage({
        type: 'info',
        message: '可惜！',
      })
    }
    dialogFormVisible.value = false;
    
    
}
const openadd = ()=>{
addObj.value = {};
  dialogFormVisible.value = true;
}
//定义存储搜索数据的变量
const checkObj = ref({
  page:1,
  size:10
});
//定义搜索数据的方法
const checkData = async (val)=>{
  if(typeof val == 'number'){
    checkObj.value.page = val;
  }
      //查询数据
      console.log(checkObj.value);//检查是否传入数据
      let result = await api.get("/api/brand/get" , checkObj.value);
      // result {code , data , message}   data->{list , count}
      //更新页面数据
      tableData.value = result.data.list;
      total.value = result.data.count;
}
const total = ref(90);
</script>
<template>
<div style="display: flex; align-items: center;">
    <el-button type="info" plain @click = "checkData">搜索</el-button>
    <el-form :model="checkObj">
    <el-input v-model="checkObj.brand" style="width: 240px" placeholder="请输入汽车的品牌" />
  </el-form>
  <el-button plain @click="openadd" type="primary" round >添加品牌</el-button>

</div>

    <el-table :data="tableData" style="width: 100% ;"class="transparent-table" >
      <el-table-column type="expand">
      <template #default="props">
        <el-tag
          v-for="model in props.row.models"
          :key="model"
        >
         {{ model }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="id" label="编号" width="200" />
      <el-table-column fixed prop="name" label="品牌名字" width="200" />
      <el-table-column  label="操作"width="200">
    <template #default = "scope">
        <el-button plain @click="openEdit(scope.row)" type="primary" :icon="Edit" circle />
        <el-button plain @click="open(scope.row.id)" type="danger" :icon="Delete" circle/>
    </template>
      </el-table-column>
    </el-table>

  <el-pagination
  :page-size = "checkObj.size"
  :current-page = "checkObj.page"
   background layout="prev, pager, next" :total="total" @current-change="checkData" />
  


    <!--添加新品牌的弹出框-->
    <el-dialog v-model="dialogFormVisible" title="添加品牌" width="500">
    <el-form :model="addObj">
      <el-form-item label="品牌：" :label-width="formLabelWidth">
        <el-input v-model="addObj.name" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="addSave">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
    <!--添加新品牌的弹出框-->

  <!--编辑的弹出框-->
  <el-dialog v-model="dialogFormEdiit" title="编辑车辆信息" width="500">
    <el-form :model="editObj">
      <el-form-item label="品牌名字：" :label-width="formLabelWidth">
        <el-input v-model="editObj.name" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormEdiit = false">取消</el-button>
        <el-button type="primary" @click="saveEdit">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!--编辑的弹出框-->
  </template>
<style scoped>
/* 表格透明背景 */
  .el-table {
    --font-weight: bold;
    --el-table-border-color: transparent;
    --el-table-border: none;
    --el-table-text-color: #000000;
    --el-table-header-text-color: #0b0b0b;
    --el-table-row-hover-bg-color: transparent;
    --el-table-current-row-bg-color: transparent;
    --el-table-header-bg-color: transparent;
    --el-table-bg-color: transparent;
    --el-table-tr-bg-color: transparent;
    --el-table-expanded-cell-bg-color: transparent;
}

/* 表头和表体透明背景 */
.el-table__header, .el-table__body {
  background-color: transparent;
}

/* 如果需要，调整行和单元格的边框和背景 */
.el-table__row {
  background-color: transparent; /* 行背景透明 */
}

.el-table__cell, .el-table__cell:hover {
  border-bottom: none; /* 移除单元格底部边框 */
  background-color: transparent; /* 单元格背景透明 */
}
</style>